<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星座测试统计 - 爱情匹配</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入Chart.js库 -->
    <script src="chart.js"></script>
    <!-- 引入自定义图表脚本 -->
    <script src="charts.js"></script>
</head>
<body>
    <div class="page">
        <!-- 内容容器 -->
        <div class="content-container">
            <!-- Tab导航 -->
            <div class="tab-bar">
                <div class="tab-container">
                    <a href="PersonalityAnalysis.html" class="tab">
                        性格
                        <div class="tab-indicator"></div>
                    </a>
                    <a href="LoveCompatibility.html" class="tab active">
                        爱情
                        <div class="tab-indicator"></div>
                    </a>
                    <a href="CareerPredisposition.html" class="tab">
                        职业
                        <div class="tab-indicator"></div>
                    </a>
                    <a href="LifestylePatterns.html" class="tab">
                        生活
                        <div class="tab-indicator"></div>
                    </a>
                </div>
            </div>
            <!-- 主内容区 -->
            <main>
                <!-- 头部信息 -->
                <div class="card">
                    <h1>星座爱情匹配</h1>
                    <p>探索不同星座之间的爱情兼容性与匹配度</p>
                </div>

                <!-- 星座爱情匹配度图表 -->
                <div class="card">
                    <h2>星座爱情匹配度分析</h2>
                    <div class="chart-container">
                        <canvas id="loveChart"></canvas>
                    </div>
                </div>

                <!-- 最佳情侣组合 -->
                <div class="card">
                    <h2>最佳情侣组合</h2>
                    <div class="match-container">
                        <div class="match-item">
                            <div class="zodiac zodiac-1">白羊</div>
                            <div class="heart">❤️</div>
                            <div class="zodiac zodiac-2">狮子</div>
                            <div class="match-info">
                                <div class="match-percentage">92%</div>
                                <div class="match-bar">
                                    <div class="match-fill match-fill-aries-leo" style="width: 92%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="match-item">
                            <div class="zodiac zodiac-1">金牛</div>
                            <div class="heart">❤️</div>
                            <div class="zodiac zodiac-2">处女</div>
                            <div class="match-info">
                                <div class="match-percentage">88%</div>
                                <div class="match-bar">
                                    <div class="match-fill match-fill-taurus-virgo" style="width: 88%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="match-item">
                            <div class="zodiac zodiac-1">双子</div>
                            <div class="heart">❤️</div>
                            <div class="zodiac zodiac-2">天秤</div>
                            <div class="match-info">
                                <div class="match-percentage">90%</div>
                                <div class="match-bar">
                                    <div class="match-fill match-fill-gemini-libra" style="width: 90%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="match-item">
                            <div class="zodiac zodiac-1">巨蟹</div>
                            <div class="heart">❤️</div>
                            <div class="zodiac zodiac-2">天蝎</div>
                            <div class="match-info">
                                <div class="match-percentage">95%</div>
                                <div class="match-bar">
                                    <div class="match-fill match-fill-cancer-scorpio" style="width: 95%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 星座爱情建议 -->
                <div class="card">
                    <h2>星座爱情建议</h2>
                    <div class="advice-list">
                        <div class="advice-item">
                            <h3>白羊座的爱情建议</h3>
                            <p>学会耐心倾听伴侣的想法，给彼此一些私人空间。</p>
                        </div>
                        <div class="advice-item">
                            <h3>金牛座的爱情建议</h3>
                            <p>尝试接受伴侣的不同观点，不要过于固执己见。</p>
                        </div>
                        <div class="advice-item">
                            <h3>双子座的爱情建议</h3>
                            <p>保持专注，不要因为好奇心而忽视了伴侣的感受。</p>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <script>
        // 页面加载完成后初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化爱情匹配图表
            initLoveChart();
        });
    </script>
</body>
</html>